<template>
  <div>
    <a-form layout="inline" style="margin-bottom: 20px">
      <a-form-item label="检测类型">
        <a-select default-value="teacher" style="width: 180px">
          <a-select-option value="teacher">教师一天超过8节</a-select-option>
          <a-select-option value="classroom">教室冲突</a-select-option>
          <a-select-option value="class">班级冲突</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" @click="handleCheck">检测</a-button>
      </a-form-item>
    </a-form>
    
    <a-table 
      :columns="columns" 
      :dataSource="data" 
      
    >
      <template slot="type" slot-scope="text, record">
        <a-tag color="red">{{ record.type }}</a-tag>
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '问题类型',
    dataIndex: 'type',
    key: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '教师/教室/班级',
    dataIndex: 'target',
    key: 'target'
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date'
  },
  {
    title: '问题描述',
    dataIndex: 'description',
    key: 'description'
  }
]

const data = [
  {
    key: '1',
    type: '教师超课时',
    target: '李红梅',
    date: '2024-03-03',
    description: '一天安排了10节课'
  },
  {
    key: '2',
    type: '教室冲突',
    target: 'bj007',
    date: '2024-03-04',
    description: '同一时间安排了2个班级'
  }
  // 更多数据...
]

export default {
  data() {
    return {
      columns,
      data
    }
  },
  methods: {
    handleCheck() {
      this.$message.info('开始检测不合理排课...')
      // 实际调用API检测
    }
  }
}
</script>